<template>
  <div class="top-bar">
    <!-- <el-button v-for="(button, index) in buttons" :key="index" class="button" @click="button.clickEvent" :disabled="button.text ==='登录' ? false : isBtnDisabled">
      <i :class="button.icon" class="icon"></i>
      <span>{{ button.text }}</span>
    </el-button> -->
    <el-button class="button" @click="handleLogin">
      <i class="el-icon-user"></i>
      <span>登录</span>
    </el-button>
    <el-button
      class="button"
      @click="handleTakePhoto"
      :disabled="isBtnDisabled"
    >
      <i class="el-icon-camera"></i>
      <span>拍照</span>
    </el-button>
    <el-button
      class="button"
      @click="handleRecordVideo"
      :disabled="isBtnDisabled"
    >
      <i class="el-icon-video-camera"></i>
      <span>{{ btnText }}</span>
    </el-button>
    <el-button
      v-if="false"
      class="button"
      @click="handleSettings"
      :disabled="isBtnDisabled"
    >
      <i class="el-icon-setting"></i>
      <span>设置</span>
    </el-button>
    <el-button class="button" @click="handleIRParams" :disabled="isBtnDisabled">
      <i class="el-icon-s-data"></i>
      <span>IR参数</span>
    </el-button>
    <!-- IR聚焦 -->
    <el-button class="button" @click="handleIRFocus" :disabled="isBtnDisabled">
      <i class="el-icon-s-operation"></i>
      <span>IR聚焦</span>
    </el-button>
    <!-- IR规则 -->
    <el-button
      v-if="false"
      class="button"
      @click="handleIRRules"
      :disabled="isBtnDisabled"
      :class="{ active: isLabel }"
    >
      <i class="el-icon-s-order"></i>
      <span>IR规则</span>
    </el-button>
    <!-- IR伪彩 -->
    <el-button
      class="button"
      @click="handleIRPseudoColor"
      :disabled="isBtnDisabled"
    >
      <!-- 新图标 -->
      <i class="el-icon-picture"></i>
      <span>IR伪彩</span>
    </el-button>
    <!-- 缩放 -->
    <el-button class="button" @click="handleZoomIn" :disabled="isBtnDisabled">
      <i class="el-icon-zoom-in"></i>
      <span>放大</span>
    </el-button>
    <el-button class="button" @click="handleZoomOut" :disabled="isBtnDisabled">
      <i class="el-icon-zoom-out"></i>
      <span>缩小</span>
    </el-button>
    <!-- 增益 -->
    <el-popover
      placement="bottom"
      width="300"
      trigger="hover"
      content="调节增益"
      class="popover"
      :disabled="isBtnDisabled"
    >
      <el-slider
        v-model="gainValue"
        :min="0"
        :max="100"
        :step="10"
        show-input
        input-size="mini"
        :format-tooltip="formatTooltip"
        @change="handleGainChange"
      ></el-slider>
      <el-button slot="reference" class="button" :disabled="isBtnDisabled">
        <i class="el-icon-sunny"></i>
        <span>增益</span>
      </el-button>
    </el-popover>
    <el-button class="button" @click="handleUVColor" :disabled="isBtnDisabled">
      <i class="el-icon-data-analysis"></i>
      <span>电晕颜色</span>
    </el-button>
    <el-button
      v-if="false"
      class="button"
      @click="handleUVCount"
      :disabled="isBtnDisabled"
    >
      <i class="el-icon-data-line"></i>
      <span>计数框</span>
    </el-button>
    <el-button
      class="button"
      @click="handleAlarmSettings"
      :disabled="isBtnDisabled"
    >
      <i class="el-icon-bell"></i>
      <span>报警设置</span>
    </el-button>
    <el-select
      :disabled="isBtnDisabled"
      v-model="mode"
      class="select"
      placeholder="请选择模式"
      filterable
      @change="handleModeChange"
    >
      <el-option
        v-for="item in modeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { updateCameraGain, updateCameraMode } from '@/api/camera';
// import { debounce } from '@/utils/tools';
export default {
  name: 'TopBar',
  data() {
    return {
      isRecord: false,
      isLabel: false,
      btnText: '录像',
      gainValue: 50,
      buttons: [
        { icon: 'el-icon-user', text: '登录', clickEvent: this.handleLogin },
        {
          icon: 'el-icon-camera',
          text: '拍照',
          clickEvent: this.handleTakePhoto,
        },
        {
          icon: 'el-icon-video-camera',
          text: '',
          clickEvent: this.handleRecordVideo,
        },
        // { icon: 'el-icon-full-screen', text: '全屏', clickEvent: this.handleFullScreen },
        {
          icon: 'el-icon-setting',
          text: '设置',
          clickEvent: this.handleSettings,
        },
        {
          icon: 'el-icon-s-data',
          text: 'IR参数',
          clickEvent: this.handleIRParams,
        },
        {
          icon: 'el-icon-s-order',
          text: 'IR规则',
          clickEvent: this.handleIRRules,
        },
        {
          icon: 'el-icon-zoom-in',
          text: '放大',
          clickEvent: this.handleZoomIn,
        },
        {
          icon: 'el-icon-zoom-out',
          text: '缩小',
          clickEvent: this.handleZoomOut,
        },
        {
          icon: 'el-icon-plus',
          text: '增益+',
          clickEvent: this.handleDBIncrease,
        },
        {
          icon: 'el-icon-minus',
          text: '增益-',
          clickEvent: this.handleDBDecrease,
        },
        // { icon: 'el-icon-refresh-right', text: '模式切换', clickEvent: this.handleModeSwitch },
        {
          icon: 'el-icon-data-analysis',
          text: '电晕颜色',
          clickEvent: this.handleUVColor,
        },
        {
          icon: 'el-icon-data-line',
          text: '计数框',
          clickEvent: this.handleUVCount,
        },
        {
          icon: 'el-icon-bell',
          text: '报警设置',
          clickEvent: this.handleAlarmSettings,
        },
      ],
      mode: '',
      modeOptions: [
        {
          value: 1,
          label: '可见光模式',
        },
        // {
        //   value: 2,
        //   label: '紫外模式',
        // },
        {
          value: 2,
          label: '红外模式',
        },
        {
          value: 3,
          label: '紫外+可见光融合模式',
        },
        {
          value: 4,
          label: '三光融合模式',
        },
        // {
        //   value: 6,
        //   label: '紫外+红外+可见光融合',
        // },
      ],
    };
  },
  props: {
    isBtnDisabled: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    // 当前播放的视频对象
    currentVideo() {
      return this.$store.getters['playVideo/getCurrentPlayingVideo'];
    },
    // config配置
    config() {
      return this.$store.getters['websocketClient/config'];
    },
  },
  watch: {
    currentVideo: {
      handler(newValue) {
        if (newValue) {
          if (this.isRecord) {
            // 这个变化了就传一次结束录像
            this.$store.dispatch('websocketClient/sendMessage', {
              ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
              message: {
                cameraId: this.currentVideo.cameraId,
                command: this.config['btnCommand']['recordVideoStop'],
              },
            });
          }
          this.isRecord = false;
          this.gainValue = Number(newValue.gain);
          this.mode = newValue.mode;
        }
      },
      deep: true,
    },
    isRecord: {
      handler(newValue) {
        if (newValue) {
          this.btnText = '结束';
        } else {
          this.btnText = '录像';
        }
      },
      immediate: true,
    },
  },
  methods: {
    formatTooltip(val) {
      return val + '%';
    },
    /**
     * 处理登录事件
     */
    handleLogin() {
      // 在这里添加登录逻辑
      this.$emit('login');
    },
    /**
     * 处理拍照事件
     */
    handleTakePhoto() {
      // this.$store.dispatch('websocketClient/sendMessage', {
      // ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
      // message: {
      //   cameraId: this.currentVideo.cameraId,
      //   command: this.config['btnCommand']['takePhoto'],
      // }});
      this.$emit('takephoto');
    },
    /**
     * 处理录像事件
     */
    handleRecordVideo() {
      this.isRecord = !this.isRecord;
      // if (this.isRecord) {
      //   this.$store.dispatch('websocketClient/sendMessage', {
      // ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
      // message: {
      //     cameraId: this.currentVideo.cameraId,
      //     command: this.config['btnCommand']['recordVideo'],
      //   }});
      // } else {
      //   this.$store.dispatch('websocketClient/sendMessage', {
      // ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
      // message: {
      //     cameraId: this.currentVideo.cameraId,
      //     command: this.config['btnCommand']['recordVideoStop'],
      //   }});
      // }
      this.$emit('recordvideo', this.isRecord);
    },
    /**
     * 处理设置事件
     */
    handleSettings() {
      this.$emit('setting');
    },
    /**
     * 处理IR参数事件
     */
    handleIRParams() {
      this.$emit('irparams');
      // 在这里添加IR参数逻辑
    },
    /**
     * 处理IR聚焦
     */
    handleIRFocus() {
      this.$store.dispatch('websocketClient/sendMessage', {
        ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
        message: {
          cameraId: this.currentVideo.cameraId,
          command: this.config['btnCommand']['iRFocus'],
        },
      });
    },
    /**
     * 处理IR规则事件
     */
    handleIRRules() {
      this.isLabel = !this.isLabel;
      this.$emit('irrules', this.isLabel);
      // 在这里添加IR规则逻辑
    },
    /**
     * 处理IR伪彩事件
     */
    handleIRPseudoColor() {
      this.$store.dispatch('websocketClient/sendMessage', {
        ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
        message: {
          cameraId: this.currentVideo.cameraId,
          command: this.config['btnCommand']['iRPseudoColor'],
        },
      });
    },
    /**
     * 处理放大事件
     */
    handleZoomIn() {
      this.$store.dispatch('websocketClient/sendMessage', {
        ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
        message: {
          cameraId: this.currentVideo.cameraId,
          command: this.config['btnCommand']['zoomIn'],
        },
      });
      // 在这里添加放大逻辑
    },
    /**
     * 处理缩小事件
     */
    handleZoomOut() {
      this.$store.dispatch('websocketClient/sendMessage', {
        ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
        message: {
          cameraId: this.currentVideo.cameraId,
          command: this.config['btnCommand']['zoomOut'],
        },
      });
      // 在这里添加缩小逻辑
    },
    /**
     * 处理增益+事件
     */
    handleDBIncrease() {
      this.$store.dispatch('websocketClient/sendMessage', {
        ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
        message: {
          cameraId: this.currentVideo.cameraId,
          command: this.config['btnCommand']['dBIncrease'],
        },
      });
      // 在这里添加dB增加逻辑
    },
    /**
     * 处理增益-事件
     */
    handleDBDecrease() {
      this.$store.dispatch('websocketClient/sendMessage', {
        ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
        message: {
          cameraId: this.currentVideo.cameraId,
          command: this.config['btnCommand']['dBDecrease'],
        },
      });
      // 在这里添加dB减少逻辑
    },
    /**
     * 处理模式切换事件
     */
    handleModeSwitch() {
      this.$store.dispatch('websocketClient/sendMessage', {
        ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
        message: {
          cameraId: this.currentVideo.cameraId,
          command: this.config['btnCommand']['modeSwitch'],
        },
      });
      // 在这里添加模式切换逻辑
    },
    /**
     * 处理模式切换事件
     */
    handleModeChange() {
      this.changeMode(this.mode);
    },
    /**
     * 处理增益变更事件
     */
    handleGainChange() {
      this.changeGain(this.gainValue);
    },
    /**
     * 处理电晕颜色事件
     */
    handleUVColor() {
      this.$emit('uvcolor');
      // this.$store.dispatch('websocketClient/sendMessage', {
      // ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
      // message: {
      //   cameraId: this.currentVideo.cameraId,
      //   command: this.config['btnCommand']['uVColor']
      // }});
      // 在这里添加电晕颜色逻辑
    },
    /**
     * 处理计数框事件
     */
    handleUVCount() {
      this.$store.dispatch('websocketClient/sendMessage', {
        ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
        message: {
          cameraId: this.currentVideo.cameraId,
          command: this.config['btnCommand']['uVCount'],
        },
      });
      // 在这里添加UV计数逻辑
    },
    /**
     * 处理报警设置事件
     */
    handleAlarmSettings() {
      this.$emit('alarmsettings');
      // 在这里添加报警设置逻辑
    },
    // 修改增益
    // 修改增益
    async changeGain(value) {
      const param = {
        id: this.currentVideo.id,
        gain: value,
      };
      const res = await updateCameraGain(param);
      if (res.code === 200) {
        this.$message.success('修改成功');
        this.$store.dispatch('websocketClient/sendMessage', {
          ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
          message: {
            cameraId: this.currentVideo.cameraId,
            command: this.config['btnCommand']['gainChange'],
            data: {
              gain: value,
            },
          },
        });
        this.$emit('on-refresh', this.currentVideo.id);
      } else {
        this.$message.error('修改失败');
      }
    },
    // 修改模式
    async changeMode(value) {
      const param = {
        id: this.currentVideo.id,
        mode: value,
      };
      const res = await updateCameraMode(param);
      if (res.code === 200) {
        this.$message.success('修改成功');
        this.$store.dispatch('websocketClient/sendMessage', {
          ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
          message: {
            cameraId: this.currentVideo.cameraId,
            command: this.config['btnCommand']['modeSwitch'],
            data: {
              mode: value,
            },
          },
        });
        this.$emit('on-refresh', this.currentVideo.id);
      } else {
        this.$message.error('修改失败');
      }
    },
  },
};
</script>

<style scoped lang="scss">
.top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左对齐 */
  gap: 8px; /* 按钮之间的间距 */
  padding: 10px;
  background-color: #f5f5f5; /* 背景颜色 */
}
.popover {
  margin-left: 10px;
  margin-right: 10px;
}
.button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  &.active {
    background-color: aquamarine;
  }
  /* overflow: hidden; */
}

.button .icon {
  font-size: 16px; /* 图标大小 */
  /* margin-bottom: 5px; 图标和文字之间的间距 */
}

.button:not(.is-disabled):hover {
  color: #606266;
}
.button:hover {
  border-color: #ccc;
}
.select {
  margin-left: 10px;
  font-size: 14px;
  cursor: pointer;
  ::v-deep .el-input.is-disabled .el-input__inner {
    height: 36px;
    padding: 8px 10px;
    background-color: #fff !important;
    border-color: #ccc;
  }
}
</style>
